<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="/static/jquery-1.9.1.min.js"> </script>
    <script src="/static/bootstrap.min.js"> </script>
<link rel="stylesheet" href="/static/bootstrap.min.css">
  
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/static/css/verify.css">
 
<!--引入JS-->
<script type="text/javascript" src="/static/js/verify.js"></script>



</head>
<body> <div class="container-fluid">
    <div class="row" style="height: 100px">
    
    </div>
    <div class="row "  style='margin-top:200px;'>
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
            <h1 style='margin-left:100px; font-size:70px;'>手机注册界面 </h1>
        </div>
    </div>
    <div class="row  ">
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
             
                <form action="{:url('index/Index/doregister')}" method='post' > 
                <div class="form-group" onsubmit="return false">
                    <label style='font-size:40px;margin-top:50px;' for="exampleInputName">手机号:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"  type="text" name="mobile" class="form-control" id="exampleInputName" placeholder="手机号" >
                </div>
                <div class="form-group">
                    <label style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">密码:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required maxlength="32" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"   type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="密码长度为6-32位" >
                </div>
 <div class="form-group">
                    <label style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">确认密码:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required maxlength="32" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"   type="password" name="rpassword" class="form-control" id="exampleInputPassword" placeholder="再输一次" >
                </div>

                <div id="mpanel1" style="width=1000px; font-size:40px;margin-top:70px;"><!-- 滑动验证 --></div>
 
 

               <div class="input-group " style='margin-top: 20px;'>
                    <label style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">验证码:</label>
                    <input  style='height:100px;font-size:40px;width:400px;'  required maxlength="4" onkeyup="value=value.replace(/\D/g, '')"   type="text" class="form-control" placeholder="验证码" name="code">
                    <span class="input-group-btn">
                <button   disabled='disabled' style="margin-left: -10px;margin-top: 111px;font-size:40px;height:100px;" class="btn btn-default" id="yz" type="button">点击获取</button>
                    </span>
                </div>
                
                <div class="input-group " style='margin-top: 20px;margin-left:150px; '>

                    <button id='btn' disabled='disabled' type="submit"  style='margin-left: -140px;font-size:40px;width:600px;height:100px;margin-top: 20px;'  class="btn btn-default">注册</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                </div>

            </form>
        </div>
    </div>
</div>

 
</div>
<script>
    function aa(){
        $('#btn').attr('disabled',false);
        $('#yz').attr('disabled',false);
    }

$('#mpanel1').slideVerify({
    type : 1,
    success : function() {
        alert('验证匹配！');
        aa();
    }
   
});
 




    $('#yz').click(function yz() {

        var mobile = $("input[name='mobile']").val();

        $.ajax({
            method: 'post',
            url: "{:url('index/index/send')}",
            dataType: 'json',
            data: {
                "mobile": mobile,
            },
            success: function (data) {
                // console.log(data['statusCode']);
                if (data['statusCode'] == '000000') {
                    alert('发送成功');
                } else {
                    alert('发送失败("可能原因次数达到限制")');
                }

            },
            error: function () {
                alert('服务器繁忙请稍后重试');
            }
        });
    })

</script>


</body>
</html>